<!DOCTYPE html>
<html lang="zh">
<!-- Head 开始 -->

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 告诉浏览器对屏幕宽度做出响应 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>订单</title>
  <!-- 主要样式表开始 -->
  <link href="/assets/css/main.css" rel="stylesheet">
  <link href="/css/viewOrder.css" rel="stylesheet">
  <!-- favicon图标 -->
  <link type="image/png" rel="shortcut icon" href="/assets/images/favicon.png">
</head>
<!-- Head 结束 -->

<body>
<!-- 预加载部分开始 -->
<div id="preloader">
  <div id="status"></div>
</div>
<!-- 预加载部分结束 -->
<div class="boxed-layout">
  <!-- 页眉部分开始 -->
  <header class="top-header theme-bg">
    <div class="container">
      <div class="row">
        <div class="col-lg-5">
          <div class="jama-logo">
            <a href="#" class=""><img src="/assets/images/logo-topbar.gif" class="img-responsive"
                                      alt=""></a>
          </div>
        </div>
        <div class="col-lg-7 align-self-center">
          <div class="jama-info d-inline-flex">
            <ul>
              <li class="border-right"><i class="fa fa-phone me-1"></i> 15348361234</li>
              <li><i class="fa fa-envelope me-1"></i>1192878959@qq.com</li>
            </ul>
          </div>
          <div class="jama-social d-inline-flex">
            <ul>
              <li><a href="#" class="border-round"><i class="fa-brands fa-facebook"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-x-twitter"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-instagram"></i></a></li>
              <li><a href="#" class="border-round"><i class="fa-brands fa-linkedin-in"></i></a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </header>
  <!-- /#header 部分结束 -->

  <!-- 导航部分 -->
  <div class="navigation">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
          <nav class="navbar navbar-expand-md navbar-dark">
            <div class="navbar-header">
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                      data-bs-target="#collapsibleNavbar">
                <span class="fa fa-navicon"></span>
              </button>
            </div>
            <div class="justify-content-center collapse navbar-collapse" id="collapsibleNavbar">
              <ul class="navbar-nav">
                <li class="nav-item"><a class="nav-link" href="/main/view">首页</a></li>
                <li class="nav-item"><a class="nav-link" href="/cart/view">商品</a></li>
                <li class="nav-item"><a class="nav-link" href="/account/view">用户</a></li>
              </ul>
            </div>
          </nav>
        </div>
      </div>
    </div>
  </div>
  <!-- /#导航部分结束 -->

  <!--主体开始-->
  <div>
    <div>
      <a href="/main/view"
         style="
                   background-color: green;
                border: 1px solid grey;
                color: white;
                border-radius: 4px;
                padding: 8px 16px;
                text-decoration: none;
                display: inline-block;
                font-size: 14px;
                margin: 4px 2px;
                cursor: pointer;
                transition: background-color 0.3s;">返回</a>
      <h2><b>订单</b></h2>
      <form action="order/revise" method="post">
        <table class="shopping-cart-table">
          <tr>
            <th>订单号</th>
            <th>用户名</th>
            <th>下单时间</th>
            <th>总价</th>
            <th>是否完成</th>
            <th>&nbsp;</th>
          </tr>

          <tr th:if="${orders == null || orders.isEmpty()}">
            <td colspan="5" class="empty-cart">目前暂无订单.</td>
          </tr>

          <tr th:each="order : ${orders}" th:id="'orderCol_' + ${order.orderId}">
            <td class="order-id" th:text="${order.orderId}"></td>
            <td th:text="${order.userId}"></td>
            <td th:text="${order.orderDate}"></td>
            <td class="total-price" th:text="${order.totalPrice}"></td>
            <td>
              <p th:if="${order.isFinished}" style="display: inline-block; background-color: #4CAF50; color: white; padding: 4px 8px; border-radius: 4px; vertical-align: middle;">已完成</p>
              <p th:if="${!order.isFinished}" style="display: inline-block; background-color: red; color: white; padding: 4px 8px; border-radius: 4px; vertical-align: middle;">未完成</p>
            </td>
            <td>
              <a th:href="'/order/toRevise?orderId=' + ${order.orderId}"
                 class="details-link"
                 th:id="'reviseButton' + ${order.orderId}">
                查看详情
              </a>
            </td>
            <td>
              <span th:if="${order.isFinished}" style="display: inline-block; background-color: #cccccc; color: white; padding: 4px 8px; border-radius: 4px; vertical-align: middle; cursor: not-allowed;">发货</span>
              <a th:if="${!order.isFinished}" th:href="@{'/order/complete?orderId=' + ${order.orderId} + '&username=' + ${order.userId}}"
                 class="completeButton"
                 th:classappend="${order.isFinished} ? 'disabled' : 'active'"
                 th:style="${order.isFinished} ? 'background-color: #cccccc; cursor: not-allowed; pointer-events: none;' : 'background-color: #4CAF50; color: white; padding: 4px 8px; border-radius: 4px; text-decoration: none;'">
                发货
              </a>
            </td>
          </tr>

          <tr class="action-buttons">
            <td colspan="7">
              <a href="/order/toAdd" class="action-button">添加订单</a>
              <a href="/order/toFind" class="action-button">搜索订单</a>
            </td>
          </tr>
        </table>
      </form>
    </div>
    <div id="Separator">&nbsp;</div>
  </div>
  <!--主体结束-->
</div>

<!-- jQuery必须最先引入 -->
<script src="/assets/js/jquery-3.4.1.min.js"></script>
<!-- Bootstrap js文件 -->
<script src="/assets/js/bootstrap.bundle.min.js"></script>
<!-- swiper文件 -->
<script src="/assets/js/swiper.min.js"></script>
<!-- 作品展示js文件 -->
<script src="/assets/js/jquery.mixitup.min.js"></script>
<!-- 站点主js文件 -->
<script src="/assets/js/main.js"></script>
<!--发货JQuery异步-->
<script src="/javascript/order.js"></script>

</body>

</html>